{% extends 'base.html' %}
{% block content %}
<title>{{ title }} - 上传视频</title>
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-8">
            <!-- 上传卡片 -->
            <div class="bg-white rounded-4 shadow-sm p-4 p-lg-5">
                <!-- 标题区 -->
                <div class="text-center mb-5">
                    <!-- <div class="icon-lg bg-primary bg-opacity-10 text-primary rounded-3 mb-3">
                        <i class="bi bi-cloud-arrow-up-fill fs-2"></i>
                    </div> -->
                    <h1 class="h3 mb-2">上传新视频</h1>
                    <p class="text-muted">支持MP4/AVI/MOV格式</p>
                </div>

                <!-- 上传表单 -->
                <form method="POST" enctype="multipart/form-data" id="uploadForm">
                    <!-- 视频文件 -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">视频文件</label>
                        <div class="file-upload-card">
                            <input type="file" class="form-control" 
                                   id="video" name="video" accept=".mp4, .avi, .mov" required>
                            <div class="d-flex align-items-center mt-2">
                                <i class="bi bi-film me-2 text-muted"></i>
                                <small class="text-muted">选择要上传的视频文件</small>
                            </div>
                        </div>
                    </div>

                    <!-- 封面图片 -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">视频封面</label>
                        <div class="file-upload-card">
                            <input type="file" class="form-control" 
                                   id="cover" name="cover" accept=".jpg, .jpeg, .png" required>
                            <div class="d-flex align-items-center mt-2">
                                <i class="bi bi-image me-2 text-muted"></i>
                                <small class="text-muted">建议尺寸1280×720px</small>
                            </div>
                        </div>
                    </div>

                    <!-- 标题输入 -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">视频标题</label>
                        <input type="text" class="form-control form-control-lg" 
                               id="title" name="title" placeholder="请输入视频标题" required>
                    </div>

                    <!-- 简介输入 -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">视频简介</label>
                        <textarea class="form-control" id="description" name="description"
                                  rows="3" placeholder="添加视频描述（可选）"></textarea>
                    </div>

                    <!-- 上传按钮 -->
                    <div class="d-grid mt-4">
                        <button type="button" class="btn btn-primary btn-lg py-3" 
                                onclick="startUpload()">
                            <i class="bi bi-upload me-2"></i>立即上传
                        </button>
                    </div>
                </form>

                <!-- 进度条 -->
                <div class="progress mt-4" id="progressBar" style="display: none; height: 8px;">
                    <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 0%"></div>
                </div>

                <!-- 提示信息 -->
                <div id="messageAlert" class="mt-3" style="display: none;"></div>
            </div>
        </div>
    </div>
</div>

<style>
.file-upload-card {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.2s;
}
.file-upload-card:hover {
    border-color: #0d6efd;
    background-color: #f8f9fa;
}
.icon-lg {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.progress-bar {
    border-radius: 4px;
}
.form-control-lg {
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
</style>
<script>
function startUpload() {
    const form = document.getElementById('uploadForm');
    const formData = new FormData(form);
    const xhr = new XMLHttpRequest();
    const progressBar = document.getElementById('progressBar');
    const progressBarInner = progressBar.querySelector('.progress-bar');
    const messageAlert = document.getElementById('messageAlert');

    // 重置提示信息并显示进度条
    messageAlert.style.display = 'none';
    progressBar.style.display = 'block';
    progressBarInner.style.width = '0%';
    progressBarInner.textContent = '0%';

    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // 上传进度监听
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            progressBarInner.style.width = percent + '%';
            progressBarInner.textContent = percent + '%';
        }
    });

    xhr.onload = function() {
        progressBar.style.display = 'none';
        if (xhr.status === 200) {
            try {
                const response = JSON.parse(xhr.responseText);
                if (response.success) {
                    // 显示成功消息并跳转
                    showAlert('success', response.message);
                    setTimeout(() => {
                        window.location.href = response.redirect;
                    }, 1500);
                } else {
                    showAlert('danger', '上传失败：' + response.message);
                }
            } catch (e) {
                showAlert('danger', '响应解析错误：' + e.message);
            }
        } else {
            showAlert('danger', '上传失败，状态码：' + xhr.status);
        }
    };

    xhr.onerror = function() {
        progressBar.style.display = 'none';
        showAlert('danger', '网络错误，上传失败。');
    };

    xhr.send(formData);
}

function showAlert(type, message) {
    const alertDiv = document.getElementById('messageAlert');
    alertDiv.style.display = 'block';
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
}
</script>
{% endblock %}